添加组件

HighStateComponent/DrawerWithFIlter/index.js

+import React, { useState } from 'react';
+import { Drawer } from 'antd-mobile';
+import NavBarDiy from '../../baseComponents/NavBarDiy';
+import FilterMenu from '../../components/FilterMenu';
+import FilterIcon from '../../components/FilterIcon';
+
+const DrawerWithFIlter = ({ navBar: {rightContent, ...navBarRest}, drawer, children, filterMenu }) => {
+  const [sidebarVisible, toggleSidebar] = useState(false);
+  const navBarRight = [<FilterIcon key="0" style={{marginLeft: '0.3rem'}} onClick={() => toggleSidebar(v => !v)} />];
+
+  function getRightContent(content) {
+    if (!content) return navBarRight;
+    if (typeof content === 'function') {
+      return content(navBarRight);
+    }
+    if (Array.isArray(content)) {
+      return [...content, ...navBarRight];
+    }
+  }
+  return (
+    <>
+      <NavBarDiy
+        title="首页"
+        rightContent={getRightContent(rightContent)}
+        {...navBarRest}
+      />
+      <Drawer
+        style={{ top: 44 }}
+        position="right"
+        sidebar={<FilterMenu onClose={() => toggleSidebar(v => !v)} {...filterMenu} />}
+        open={sidebarVisible}
+        onOpenChange={() => toggleSidebar(v => !v)}
+        {...drawer}
+      >
+        {children}
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerWithFIlter;

baseComponents/Button/index.js

+import styles from './index.less';
+
+export default function Button({ children, primary, inline, ...rest}) {
+  const classNames = [styles.btn];
+  if (primary) {
+    classNames.push(styles.primary);
+  }
+  if (inline) {
+    classNames.push(styles.inline);
+  }
+  return <button className={classNames.join(' ')} {...rest}>{children}</button>
+};

baseComponents/Button/index.less

+@primary-color: #5094FF;
+
+.btn {
+  font-size: 0.32rem;
+  font-weight: bold;
+
+  padding: 0.16rem 0.69rem;
+  text-align: center;
+  border: 1px solid @primary-color;
+  border-radius: 9999px;
+  color: @primary-color;
+  background-color: transparent;
+  display: block;
+  width: 100%;
+}
+.primary {
+  background-color: @primary-color;
+  color: white;
+}
+.inline {
+  display: inline-block;
+  width: auto;
+}

baseComponents/CheckBoxDiy/ListItem.js

+import styles from './ListItem.less';
+export default ({name, onClick, active}) => {
+  return (
+    <div className={styles.item + ' ' + (active ? styles.active : '')} onClick={onClick}>
+      {name}
+    </div>
+  )
+};

baseComponents/CheckBoxDiy/ListItem.less

+.item {
+  display: inline-block;
+  // font-size: 16px;
+  font-size: 0.28rem;
+  color: rgba(102, 102, 102, 1);
+  padding: 0.1rem;
+  border: 1px solid #ccc;
+  border-radius: 0.04rem;
+  background-color: #F9F9F9;
+  margin: 0.16rem 0.12rem;
+  width: calc(33.33% - 0.24rem);
+  text-align: center;
+  transition: all 0.25s;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  &.active {
+    border-color: rgba(80, 148, 255, 1);
+    background-color: #EDF4FF;
+  }
+}

baseComponents/CheckBoxDiy/index.js

+import styles from './index.less';
+import ListItem from './ListItem';
+
+const CheckBoxDiy = ({
+  className = '',
+  style,
+  name,
+  formKey,
+  options = [],
+  values,
+  onChange,
+  single = false,
+}) => {
+  const value = values[formKey];
+  function toggle(option) {
+    const newVal = single
+      ? value === option.key
+        ? undefined
+        : option.key
+      : value && value.includes(option.key)
+      ? value.filter(k => k !== option.key)
+      : (value || []).concat([option.key]);
+    onChange({...values, [formKey]: newVal});
+  }
+  return (
+    <div className={styles.wrapper + ' ' + className} style={style}>
+      <div className={styles.title}>{name}</div>
+      <div className={styles.list}>
+        {options.map(option => (
+          <ListItem
+            key={option.key}
+            name={option.name}
+            onClick={() => toggle(option)}
+            active={single ? value === option.key : value && value.includes(option.key)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+export default CheckBoxDiy;

baseComponents/CheckBoxDiy/index.less

+.wrapper {
+  padding-bottom: 0.16rem;
+}
+.title {
+  font-size: 0.32rem;
+  color: rgba(51, 51, 51, 1);
+}
+
+.list {
+  margin: 0.14rem -0.12rem -0.16rem -0.12rem;
+}

baseComponents/DatePickerDiy/index.js

+import React from 'react';
+import moment from 'moment';
+import { DatePicker } from 'antd-mobile';
+import styles from './index.less';
+
+const CustomChildren = ({ extra, onClick, children, style }) => (
+  <div
+    onClick={onClick}
+    className={styles.container}
+    style={style}
+  >
+    <div className={styles.children}>{children}</div>
+    <div className={styles.extra}>{extra}</div>
+  </div>
+);
+
+export default function DatePickerDiy({ onChange, name, value, style }) {
+  return (
+    <DatePicker
+      mode="date"
+      title={name}
+      extra={value ? moment(value).format('YYYY-MM-DD') : null}
+      value={value ? moment(value).toDate() : null}
+      onChange={date => onChange(moment(date).format('YYYY-MM-DD'))}
+    >
+      <CustomChildren style={style}>{name}</CustomChildren>
+    </DatePicker>
+  );
+}

baseComponents/DatePickerDiy/index.less

+.container {
+  font-size: 0.28rem;
+  align-items: center;
+  color: #666;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.children {
+  flex: 0 0 auto;
+}
+.extra {
+  flex: 1 1 auto;
+  border: 1px solid rgba(204, 204, 204, 1);
+  border-radius: 0.04rem;
+  margin-left: 0.26rem;
+  padding: 0.15rem 0 0.15rem 0.23rem;
+}

baseComponents/FilterMenu/index.js

+import styles from './index.less';
+import { useEffect } from 'react'
+import DatePickerDiy from '../DatePickerDiy';
+import SeperatedDateRangePicker from '../SeperatedDateRangePicker';
+import { useState } from 'react';
+import CheckBoxDiy from '../CheckBoxDiy'
+import Button from '../Button'
+
+const components = {
+  'DatePickerDiy': DatePickerDiy,
+  'SeperatedDateRangePicker': SeperatedDateRangePicker,
+  CheckBoxDiy,
+};
+
+const configExample = [
+  {
+    title: '时间选择',
+    type: 'SeperatedDateRangePicker',
+    key: 'beginTime',
+    beginKey: 'beginTime',
+    endKey: 'endTime',
+  },
+  {
+    name: '点名类型',
+    type: 'CheckBoxDiy',
+    key: 'typeId',
+    formKey: 'typeId',
+  },
+];
+
+export default function FilterMenu({ formValues, onSubmit, onClose, config = configExample }) {
+  const [values, setValues] = useState({});
+  useEffect(() => {
+    setValues(formValues);
+  }, [formValues]);
+  function reset() {
+    onClose();
+    onSubmit({});
+  }
+  function submit() {
+    onClose();
+    onSubmit(values);
+  }
+
+  return (
+    <div className={styles.page}>
+      {config.map(item => {
+        const Cmp = components[item.type];
+        if (!Cmp) return null;
+        return (
+          <div key={item.key} style={{margin: '0.24rem'}}>
+            <Cmp
+              {...item}
+              values={values}
+              onChange={vals => setValues(origialvals => ({ ...origialvals, ...vals }))}
+            />
+          </div>
+        );
+      })}
+
+      <div className={styles.buttonContainer}>
+        <Button inline onClick={reset}>
+          重置
+        </Button>
+        <Button inline primary onClick={submit} style={{marginLeft: '0.24rem'}}>
+          确定
+        </Button>
+      </div>
+    </div>
+  );
+}

baseComponents/FilterMenu/index.less

+.page {
+  width: 80vw;
+  height: 100%;
+  background-color: white;
+  overflow: hidden;
+  border-top: 2px solid #EEE;
+}
+.buttonContainer {
+  bottom: 0.48rem;
+  position: fixed;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 0;
+}
+

baseComponents/SeperatedDateRangePicker/index.js

+import DatePickerDiy from '../DatePickerDiy';
+
+export default function SeperatedDateRangePicker({
+  values,
+  onChange,
+  title = '时间选择',
+  beginKey,
+  beginName = '开始时间',
+  endKey,
+  endName = '结束时间',
+}) {
+  return (
+    <>
+      <div style={{ fontSize: '0.32rem', color: '#333' }}>{title}</div>
+      <DatePickerDiy
+        style={{ marginTop: '0.3rem' }}
+        name={beginName}
+        value={values[beginKey]}
+        onChange={beginTime => onChange({ ...values, [beginKey]: beginTime })}
+      />
+      <DatePickerDiy
+        style={{ marginTop: '0.3rem' }}
+        name={endName}
+        value={values[endKey]}
+        onChange={beginTime => onChange({ ...values, [endKey]: beginTime })}
+      />
+    </>
+  );
+}