Gecko [ gandhischool.edu.np ]

Name	Size	Permission
Calendar.tsx	1.53 KB	-rw-rw-r--
ReactSelect.tsx	1.63 KB	-rw-rw-r--
index.ts	59 B	-rw-rw-r--

Code Editor : ReactSelect.tsx

import React = require('react');
import Select, {
  Props as ReactSelectProps,
  OptionTypeBase,
} from 'react-select';

interface Props {
  containerclassname?: string;
  label?: any;
  required?: boolean;
  options: any;
  sortBy?: string;
}

const selectStyles = {
  container: (base: any) => ({
    ...base,
    minWidth: '200px',
  }),
  option: (base: any) => ({
    ...base,
    color: '#333',
  }),
};

const ReactSelect = (props: Props & ReactSelectProps<OptionTypeBase>) => {
  const {
    containerclassname,
    label,
    required,
    sortBy,
    options,
    ...rest
  } = props;
  return (
    <div className={containerclassname ?? 'form-group mb-2'}>
      {label && (
        <label>
          {label} {required ? <b className="required-star">*</b> : ''}
        </label>
      )}

<Select
        className="react-select-container"
        classNamePrefix="filter"
        styles={selectStyles}
        options={sortingOtions(options, sortBy)}
        {...rest}
        // theme={theme => ({
        //   ...theme,
        //   colors: {
        //     ...theme.colors,
        //     primary25: '#2b3583',
        //     primary: '#2b3583',
        //   },
        // })}
      />
    </div>
  );
};

ReactSelect.defaultProps = {
  sortBy: 'normal',
};

export { ReactSelect };

${this.title}

Code Editor : ReactSelect.tsx