feat: first commit

src/components/anchor-picker/index.tsx

@@ -0,0 +1,186 @@
+import { BaseEventOrig, Input, InputProps } from '@tarojs/components';
+
+import classNames from 'classnames';
+import { isEqual } from 'lodash-es';
+import { useCallback, useState } from 'react';
+
+import PickerToolbar from '@/components/picker-toolbar';
+import {
+  EmployType,
+  ALL_EMPLOY_TYPES,
+  FULL_PRICE_OPTIONS,
+  PART_PRICE_OPTIONS,
+  EMPLOY_TYPE_TITLE_MAP,
+} from '@/constants/job';
+import {
+  ALL_ANCHOR_READ_TYPES,
+  ALL_GENDER_TYPES,
+  ANCHOR_READ_TITLE_MAP,
+  AnchorReadType,
+  GENDER_TYPE_TITLE_MAP,
+  GenderType,
+} from '@/constants/material';
+import { IAnchorFilters } from '@/types/material';
+import { isUndefined } from '@/utils/common';
+
+import './index.less';
+
+interface IProps {
+  value: IAnchorFilters;
+  onConfirm: (newValue: IAnchorFilters) => void;
+}
+
+const PREFIX = 'anchor-picker';
+const getDefaultGender = (value: IAnchorFilters) => value.gender;
+const getDefaultEmploy = (value: IAnchorFilters) => value.employType;
+const getDefaultReadType = (value: IAnchorFilters) => value.readType;
+const getDefaultCategory = (value: IAnchorFilters) => value.category || '';
+const getSalaryValue = (value: IAnchorFilters, full: boolean) => {
+  const min = full ? value.lowPriceForFullTime : value.lowPriceForPartyTime;
+  const max = full ? value.highPriceForFullTime : value.highPriceForPartyTime;
+  if (!min || !max) {
+    return null;
+  }
+  const options = full ? FULL_PRICE_OPTIONS : PART_PRICE_OPTIONS;
+  return options.find(v => v.value && v.value.minSalary <= min && v.value.maxSalary >= max)?.value;
+};
+
+function AnchorPicker(props: IProps) {
+  const { value, onConfirm } = props;
+  const [gender, setGender] = useState<GenderType | undefined>(getDefaultGender(value));
+  const [readType, setReadType] = useState<AnchorReadType | undefined>(getDefaultReadType(value));
+  const [employType, setEmployType] = useState<EmployType | undefined>(getDefaultEmploy(value));
+  const [fullSalary, setFullSalary] = useState(getSalaryValue(value, true));
+  const [partSalary, setPartSalary] = useState(getSalaryValue(value, false));
+  const [category, setCategory] = useState(getDefaultCategory(value));
+
+  const handleInputCategory = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    setCategory(e.detail.value || '');
+  }, []);
+
+  const handleClickReset = useCallback(() => {
+    setGender(undefined);
+    setReadType(undefined);
+    setEmployType(undefined);
+    setFullSalary(null);
+    setPartSalary(null);
+    setCategory('');
+  }, []);
+
+  const handleSelectFull = useCallback(
+    (newSalary?: { minSalary: number; maxSalary: number }) => {
+      setFullSalary(newSalary === fullSalary ? null : newSalary);
+    },
+    [fullSalary]
+  );
+
+  const handleSelectPart = useCallback(
+    (newSalary?: { minSalary: number; maxSalary: number }) => {
+      setPartSalary(newSalary === partSalary ? null : newSalary);
+    },
+    [partSalary]
+  );
+
+  const handleClickConfirm = useCallback(() => {
+    const filters: IAnchorFilters = {};
+    if (!isUndefined(gender)) {
+      filters.gender = gender === GenderType.All ? undefined : gender;
+    }
+    employType && (filters.employType = employType);
+    readType && (filters.readType = readType);
+    category && (filters.category = category);
+    if (fullSalary) {
+      filters.lowPriceForFullTime = fullSalary.minSalary;
+      filters.highPriceForFullTime = fullSalary.maxSalary;
+    }
+    if (partSalary) {
+      filters.lowPriceForPartyTime = partSalary.minSalary;
+      filters.highPriceForPartyTime = partSalary.maxSalary;
+    }
+    onConfirm(filters);
+  }, [gender, employType, readType, category, fullSalary, partSalary, onConfirm]);
+
+  return (
+    <div className={PREFIX}>
+      <div className={`${PREFIX}__title`}>性别</div>
+      <div className={`${PREFIX}__container`}>
+        {ALL_GENDER_TYPES.map((type: GenderType) => (
+          <div
+            key={type}
+            onClick={() => setGender(type)}
+            className={classNames(`${PREFIX}__item`, { selected: type === gender })}
+          >
+            {GENDER_TYPE_TITLE_MAP[type]}
+          </div>
+        ))}
+      </div>
+      <div className={`${PREFIX}__title`}>全职/兼职</div>
+      <div className={`${PREFIX}__container`}>
+        {ALL_EMPLOY_TYPES.map(type => (
+          <div
+            key={type}
+            onClick={() => setEmployType(type)}
+            className={classNames(`${PREFIX}__item`, { selected: type === employType })}
+          >
+            {EMPLOY_TYPE_TITLE_MAP[type]}
+          </div>
+        ))}
+      </div>
+      <div className={`${PREFIX}__title`}>已读/未读</div>
+      <div className={`${PREFIX}__container`}>
+        {ALL_ANCHOR_READ_TYPES.map(type => (
+          <div
+            key={type}
+            onClick={() => setReadType(type)}
+            className={classNames(`${PREFIX}__item`, { selected: type === readType })}
+          >
+            {ANCHOR_READ_TITLE_MAP[type]}
+          </div>
+        ))}
+      </div>
+      <div className={`${PREFIX}__title`}>全职薪资范围（每月）</div>
+      <div className={`${PREFIX}__container`}>
+        {FULL_PRICE_OPTIONS.map(option => (
+          <div
+            key={option.label}
+            onClick={() => handleSelectFull(option.value)}
+            className={classNames(`${PREFIX}__item`, { selected: isEqual(option.value, fullSalary) })}
+          >
+            {option.label}
+          </div>
+        ))}
+      </div>
+      <div className={`${PREFIX}__title`}>兼职薪资范围（每小时）</div>
+      <div className={`${PREFIX}__container`}>
+        {PART_PRICE_OPTIONS.map(option => (
+          <div
+            key={option.label}
+            onClick={() => handleSelectPart(option.value)}
+            className={classNames(`${PREFIX}__item`, { selected: isEqual(option.value, partSalary) })}
+          >
+            {option.label}
+          </div>
+        ))}
+      </div>
+      <div className={`${PREFIX}__title`}>播过的品类（模糊匹配）</div>
+      <Input
+        maxlength={20}
+        value={category}
+        confirmType="done"
+        placeholder="如 服装"
+        onInput={handleInputCategory}
+        className={`${PREFIX}__input`}
+        placeholderClass={`${PREFIX}__input-placeholder`}
+      />
+      <PickerToolbar
+        cancelText="重置"
+        confirmText="确定"
+        className={`${PREFIX}__toolbar`}
+        onClickCancel={handleClickReset}
+        onClickConfirm={handleClickConfirm}
+      />
+    </div>
+  );
+}
+
+export default AnchorPicker;