feat: first commit

src/components/job-picker/index.less

@@ -0,0 +1,47 @@
+@import '@/styles/variables.less';
+
+.job-type-picker {
+  background: #FFFFFF;
+
+  &__groups-container {
+    padding: 24px;
+  }
+
+  &__group {
+    margin-top: 8px;
+  }
+
+  &__group-title {
+    font-size: 28px;
+    line-height: 40px;
+    font-weight: 400;
+  }
+
+  &__group-items-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-top: 16px;
+  }
+
+  &__group-item {
+    min-width: 158px;
+    height: 64px;
+    font-size: 28px;
+    padding: 0 19px;
+    margin-right: 16px;
+    margin-bottom: 24px;
+    box-sizing: border-box;
+    border-radius: 34px;
+    line-height: 64px;
+    font-weight: 400;
+    text-align: center;
+    color: @blColor;
+    background: #F6F6F6;
+
+    &.selected {
+      color: @blHighlightColor;
+      background: @blHighlightBg;
+    }
+  }
+}

src/components/job-picker/index.tsx

@@ -0,0 +1,90 @@
+import classNames from 'classnames';
+import { useState } from 'react';
+
+import PickerToolbar from '@/components/picker-toolbar';
+import { EMPLOY_TYPE_TITLE_MAP, EmployType } from '@/constants/job';
+import Toast from '@/utils/toast';
+
+import './index.less';
+
+interface IProps {
+  onConfirm: (employType: EmployType) => void;
+}
+
+interface IGroupProps {
+  name: string;
+  types: string[];
+  typeTitleMap: Record<string, string>;
+  selectTypes: string[];
+  onClickItem: (item: string) => void;
+}
+
+const PREFIX = 'job-type-picker';
+
+const TypeGroup = (props: IGroupProps) => {
+  const { name, types, selectTypes, typeTitleMap, onClickItem } = props;
+  return (
+    <div className={`${PREFIX}__group`}>
+      <div className={`${PREFIX}__group-title`}>{name}</div>
+      <div className={`${PREFIX}__group-items-container`}>
+        {types.map(type => (
+          <div
+            key={type}
+            onClick={() => onClickItem(type)}
+            className={classNames(`${PREFIX}__group-item`, { selected: selectTypes.includes(type) })}
+          >
+            {typeTitleMap[type]}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+function JobPicker(props: IProps) {
+  const [selectedEmployTypes, setSelectedEmployTypes] = useState<EmployType[]>([EmployType.Full, EmployType.Part]);
+  const { onConfirm } = props;
+
+  const handleClickEmployType = (clickType: EmployType) => {
+    if (selectedEmployTypes.includes(clickType)) {
+      setSelectedEmployTypes(selectedEmployTypes.filter(type => type !== clickType));
+    } else {
+      setSelectedEmployTypes(selectedEmployTypes.concat([clickType]));
+    }
+  };
+
+  const handleClickReset = () => {
+    setSelectedEmployTypes([EmployType.Full, EmployType.Part]);
+  };
+
+  const handleClickConfirm = () => {
+    if (!selectedEmployTypes.length) {
+      Toast.error('至少选择一个');
+      return;
+    }
+    const newEmployType = selectedEmployTypes.length === 1 ? selectedEmployTypes[0] : EmployType.All;
+    onConfirm(newEmployType);
+  };
+
+  return (
+    <div className={PREFIX}>
+      <div className={`${PREFIX}__groups-container`}>
+        <TypeGroup
+          name="职位类型"
+          types={[EmployType.Full, EmployType.Part]}
+          typeTitleMap={EMPLOY_TYPE_TITLE_MAP}
+          selectTypes={selectedEmployTypes}
+          onClickItem={handleClickEmployType}
+        />
+      </div>
+      <PickerToolbar
+        cancelText="重置"
+        confirmText="确定"
+        onClickCancel={handleClickReset}
+        onClickConfirm={handleClickConfirm}
+      />
+    </div>
+  );
+}
+
+export default JobPicker;