Function Serve

ui/src/components/Serve/index.tsx:31–325

(props: IProps)

const MIN = 0;

const Serve = (props: IProps) => {
  const {
    id,
    index,
    serve,
    disabled,
    variations,
    customStyle,
    hooksFormContainer,
    handleChangeServe,
  } = props;

  const [ value, saveValue ] = useState<string | number | boolean | (string | number | boolean)[] | undefined>(-1);
  const [ percentageShow, setPercentageShow ] = useState<boolean>(false);
  const [ variationsInUse, setVariationsInUse ] = useState<IVariation[]>([]);
  const [ variationsOptions, setVariatiosOptions ] = useState<IDropItemProps[]>([]);
  const [ total, setTotal ] = useState<number>(0);
  const intl = useIntl();

  const {
    formState: { errors },
    setValue,
    trigger,
    register,
    setError,
    clearErrors,
  } = hooksFormContainer.useContainer();
  const { registerErrorName } = useFormErrorScrollIntoView();

  useEffect(() => {
    setVariationsInUse(cloneDeep(variations));
  }, [variations]);

  useEffect(() => {
    if (id) {
      register(`rule_${id}_serve`, { 
        required: true,
      });
    } else {
      register('defaultServe', { 
        required: true,
      });
    }
  }, [id, intl, register]);

  useEffect(() => {
    const options: IDropItemProps[] = variationsInUse.map((item: IDropItemProps, index: number) => {
      return {
        value: index,
        text: item.name || item.value,
        content: (
          <div className={styles['dropdown-variation']}>
            <span style={{background: VariationColors[index % 20]}} className={styles['dropdown-variation-color']}></span>
            <span className={styles['dropdown-variation-text']}>
              { item.name || item.value }
            </span>
          </div>
        ),