@ercioko/meblotex-api 0.2.0 → 0.2.2

package/src/components/StatusTag.tsx

@@ -0,0 +1,83 @@
+import React, { FC } from 'react';
+import { Tag as AntTag, TagProps } from 'antd';
+
+export const statuses = [
+  'ZAM',
+  'PRZ',
+  'PRO',
+  'WYP',
+  'DWY',
+  'WYB',
+  'PDM',
+  'WZM',
+  'N',
+  'B',
+  'ARC',
+  'WZ',
+  'PW',
+] as const;
+
+export type Status = typeof statuses[number];
+
+export const StyledTag: FC<TagProps> = ({
+  style,
+  ...props
+}) => (
+  <AntTag
+    style={{
+      textAlign: 'center',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      right: '0',
+      left: '0',
+      ...style,
+    }}
+    {...props}
+  />
+);
+
+
+type Props = {
+  status: Status;
+  Tag?: FC<TagProps>;
+}
+
+const StatusTag: FC<Props> = ({ status, Tag = StyledTag }) => {
+  switch (status) {
+    case 'ZAM':
+      return <Tag color="cyan">Zamówione</Tag>;
+    case 'PRZ':
+      return <Tag color="blue">Przyjete</Tag>;
+    case 'PRO':
+      return <Tag color="gold">W produkcji</Tag>;
+    case 'WYP':
+      return <Tag color="orange">Wyprodukowane</Tag>;
+    case 'DWY':
+      return <Tag color="green">Do wydania</Tag>;
+    case 'WYB':
+      return <Tag color="lime">Wybieranie</Tag>;
+    case 'PDM':
+      return <Tag color="gray">Przyjęte do magazynu</Tag>;
+    case 'WZM':
+      return <Tag color="green">Wydane z magazynu</Tag>;
+    case 'N':
+      return <Tag color="gold">Bufor portal</Tag>;
+    case 'B':
+      return <Tag color="blue">Bufor</Tag>;
+    case 'ARC':
+      return <Tag color="black">Archiwum</Tag>;
+    case 'WZ':
+      return <Tag color="blue">Wydanie zewnętrzne</Tag>;
+    case 'PW':
+      return <Tag color="green">Przychód wewnętrzny</Tag>;
+    default:
+      // eslint-disable-next-line no-console
+      console.log('nieznany: ', status);
+      return <Tag color="red">Nieznany</Tag>;
+  }
+}
+
+export default StatusTag;

package/src/components/Table/DataTableWrapper.tsx

@@ -0,0 +1,28 @@
+import React, { ForwardedRef, forwardRef } from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+  max-height: 100%;
+  border-bottom: 1px solid #e8e8e8;
+  margin-top: 0;
+`;
+
+Wrapper.defaultProps = {
+  className: 'data-table-wrapper',
+};
+
+function DataTableWrapper(
+  { children, ...props }: React.PropsWithChildren<Record<string, unknown>>,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <Wrapper className="data-table-wrapper" {...props} ref={ref}>
+      {children}
+    </Wrapper>
+  );
+}
+
+export default Wrapper;
+// export default forwardRef(DataTableWrapper);

package/src/components/Table/FloatingActions.tsx

@@ -0,0 +1,152 @@
+import { Space } from 'antd';
+import React from 'react';
+import { DeleteTwoTone } from '@ant-design/icons';
+import { ActionFunction, Actions, DataRow } from '../../app_types';
+import styled from 'styled-components';
+
+const StyledFloatingActions = styled.div`
+  & {
+    position: absolute;
+    left: 100px;
+    pointer-events: none;
+    transition: width 300ms ease-in-out, padding 300ms ease-in-out;
+    box-sizing: content-box;
+    overflow: hidden;
+    padding-top: 20px;
+    z-index: 2;
+  }
+  &.shown {
+    pointer-events: all;
+  }
+  & > div {
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
+    height: 58px;
+    background: #fff;
+    border-radius: 10px;
+    margin: 10px;
+  }
+  & > div > div:first-child {
+    margin-left: 27px;
+  }
+  & > div > div:last-child {
+    margin-right: 27px;
+  }
+  & > div .action {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 150ms ease-in-out;
+    position: relative;
+  }
+  & > div .action .action-tooltip {
+    position: absolute;
+    top: -35px;
+    background: #595959;
+    color: #fff;
+    border-radius: 8px;
+    padding: 2px 10px;
+    display: none;
+  }
+  & > div .action .action-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: calc(50% - 8px);
+    display: block;
+    width: 0;
+    height: 0;
+    border-width: 8px;
+    border-style: solid;
+    border-color: #595959 transparent transparent transparent;
+  }
+  & > div .action:hover {
+    width: 48px;
+    height: 48px;
+  }
+  & > div .action:hover:enabled {
+    cursor: pointer;
+  }
+  & > div .action:hover .action-tooltip {
+    display: initial;
+  }
+  & > div .action:hover span {
+    background: rgba(0, 0, 0, 0.1);
+  }
+  & > div .action:hover span svg {
+    font-size: 28px;
+  }
+  & > div .action span {
+    padding: 10px;
+    border-radius: 100px;
+    transition: 150ms ease-in-out;
+  }
+  & > div .action span svg {
+    transition: 150ms ease-in-out;
+    font-size: 24px;
+  }
+`
+
+export default function FloatingActions<DataType = DataRow>({
+  actionsDimensions,
+  actionsFor,
+  floatingButtons,
+  actionHover,
+  actionLeave,
+  hide,
+  actions,
+}: {
+  actionsDimensions: { top: number; width: number; transition: string };
+  actionsFor: undefined;
+  floatingButtons: ActionFunction<DataType>[] | undefined;
+  actionHover: () => void;
+  actionLeave: () => void;
+  hide: (e?: MouseEvent | undefined) => void;
+  actions: Actions<DataType>;
+}): JSX.Element {
+  return (
+    <StyledFloatingActions
+      role="button"
+      style={actionsDimensions}
+      className={`floating-actions ${actionsFor ? 'shown' : ''}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
+      <Space size={28}>
+        {floatingButtons?.map((_, i) => (
+          <div
+            role="button"
+            key={i.toString()}
+            className="action"
+            onMouseEnter={actionHover}
+            onMouseLeave={actionLeave}
+            onClick={() => hide()}
+          >
+            {actions.tooltips && actions.tooltips[i] ? (
+              <div className="action-tooltip">{actions.tooltips[i]}</div>
+            ) : undefined}
+            {/* {e(actionsFor)} */}
+          </div>
+        ))}
+        {actions.delete ? (
+          <div
+            className="action"
+            onMouseEnter={actionHover}
+            onMouseLeave={actionLeave}
+          >
+            <div className="action-tooltip">Usuń</div>
+            {typeof actionsFor !== 'undefined' && (
+              <DeleteTwoTone
+                // onClick={() => deleteRow(actionsFor.id)}
+                twoToneColor="#F5222D"
+              />
+            )}
+          </div>
+        ) : undefined}
+      </Space>
+    </StyledFloatingActions>
+  );
+}

package/src/components/Table/Spinner.tsx

@@ -0,0 +1,35 @@
+import config from '../../config';
+import { Spin } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+const { ROW_SIZE } = config;
+const StyledSpinner = styled.div`
+  & {
+    position: absolute;
+    bottom: -34px;
+    left: 50%;
+  }
+
+  .ant-spin {
+    display: flex;
+    justify-content: center;
+    margin: 15px 0;
+  }
+`
+
+export default function Spinner() {
+  return (
+    <StyledSpinner
+      className="spinner-wrapper"
+      style={{
+        height: ROW_SIZE,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Spin style={{ margin: 0 }} />
+    </StyledSpinner>
+  );
+}

package/src/components/Table/Summary.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TableData } from './styles'
+
+export default function Summary({ summary, widths }) {
+  return summary ? (
+    <div className="tr summary">
+      {summary.map((e, i) => (
+        <TableData
+          key={i}
+          style={{ width: `${widths[i]}px` }}
+          className={e === undefined ? 'td orphan' : 'td'}
+        >
+          {e}
+        </TableData>
+      ))}
+    </div>
+  ) : null;
+}