forstok-ui-lib 5.6.11 → 5.7.1

package/src/components/date/daterange.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import moment from 'moment';
+import DateRangePicker from '@wojtekmaj/react-daterange-picker';
+import { configDateRange } from '../../maps';
+import '@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css';
+import 'react-calendar/dist/Calendar.css';
+import './daterangepicker.css';
+import { DateRangeWrapper } from './styles';
+import { TValueDateRange } from './typed';
+
+type TDateRangeComponent = {
+  $mode?: string;
+  startDate?: Date | null;
+  endDate?: Date | null;
+  evChange: (value: TValueDateRange) => void;
+  portalId?: string;
+}
+
+const DateRangeComponent = ({ $mode, startDate, endDate, evChange, portalId }: TDateRangeComponent) => {
+  const _startDate: Date | null = startDate || moment(configDateRange.startDate, 'YYYY-MM-DD').toDate();
+  const _endDate: Date | null = endDate || moment(configDateRange.endDate, 'YYYY-MM-DD').toDate();
+  const minDate = moment(configDateRange.minDate, 'YYYY-MM-DD').toDate();
+  const maxDate = moment().toDate();
+
+  const [value, setValue] = useState<TValueDateRange>([_startDate, _endDate]);
+
+  const onChange = (value: TValueDateRange) => {
+    setValue(value);
+    evChange && evChange(value);
+  }
+
+  return (
+    <DateRangeWrapper $mode={$mode}>
+      <DateRangePicker 
+        minDate={minDate}
+        maxDate={maxDate}
+        onChange={onChange} 
+        value={value}
+        clearIcon={null}
+        {...portalId && { portalContainer: document.getElementById(portalId) }} />
+    </DateRangeWrapper>
+  );
+}
+
+export default DateRangeComponent;

package/src/components/date/daterangepicker.css

@@ -0,0 +1,100 @@
+.react-daterange-picker {
+  font-family: var(--pri-ft-fm);
+  font-size: var(--pri-ft-sz);
+  color: var(--pri-clr);
+  background-color: var(--ter-clr-bg);
+  align-items: center;
+  border: 0;
+  border-radius: var(--sec-rd);
+  font-weight: 400;
+  height: 30px;
+  padding: 0 26px 0 16px;
+  position: relative;
+  width: 100%;
+}
+.react-daterange-picker__wrapper {
+  border: 0;
+  width: 100%;
+  justify-content: left;
+  display: inline-grid;
+  grid-auto-flow: column;
+}
+.react-calendar {
+  background-color: var(--pri-clr-bg);
+  border: 1px solid var(--sec-clr-ln);
+  box-shadow: var(--sec-shd-bx);
+  border-radius: var(--sec-rd);
+  border: 1px solid #a0a096;
+  font-family: var(--pri-ft-fm);
+  font-size: var(--pri-ft-sz);
+  color: var(--pri-clr);
+  line-height: 1.125em;
+  padding: 10px 15px;
+}
+.react-calendar__navigation__label__labelText {
+  color: #000;
+  font-size: 1em;
+  font-weight: 700;
+  height: 35px;
+  line-height: 35px;
+  position: relative;
+  text-align: center;
+}
+.react-calendar__tile {
+  font-size: 1em;
+  line-height: 1;
+  border-radius: 0;
+}
+.react-calendar__tile--now {
+  border-radius: 10px !important;
+}
+.react-calendar__tile--now.react-calendar__tile--active {
+  border-radius: 0 !important;
+}
+.react-calendar__tile--now.react-calendar__tile--rangeEnd.react-calendar__tile--active {
+  border-radius: 0 10px 10px 0 !important;
+}
+.react-calendar__tile--hover {
+  border-radius: 0;
+}
+.react-calendar__tile--active {
+  background-color: #fc5c64;
+  border: 1px solid #ec5b62;
+}
+.react-calendar__tile--active:enabled:hover, .react-calendar__tile--active:enabled:focus {
+  background-color: #fc5c64;
+  border: 1px solid #ec5b62;
+}
+.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd {
+  border-radius: 10px !important;
+}
+.react-calendar__tile--now.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd.react-calendar__tile--active {
+  border-radius: 10px !important;
+}
+
+
+.react-calendar__tile--rangeStart, .react-calendar__tile--hoverStart {
+  border-radius: 10px 0px 0 10px !important;
+}
+.react-calendar__tile--rangeEnd, .react-calendar__tile--hoverEnd {
+  border-radius: 0 10px 10px 0 !important;
+}
+
+
+.react-calendar__month-view__days {
+  gap: 1px 0;
+}
+.react-calendar__month-view__weekdays {
+  font-size: 1em;
+}
+.react-calendar__navigation__arrow {
+  font-size: 1.5em;
+}
+.react-daterange-picker__calendar {
+  z-index: 100;
+}
+.react-daterange-picker__button {
+  position: absolute;
+  right: 0;
+}
+  

package/src/components/date/{styles.ts → styles.tsx}

@@ -398,4 +398,19 @@ export const DateRangePortalContainer = styled.div`
 export const DateRangeIconContainer = styled.div`
   display: flex;
   padding: 0 0 0 12px;
-`
+`
+export const DateRangeWrapper = styled.div<{ $mode?: string }>`
+  position: relative;
+  ${({ $mode }: { $mode?: string }) => $mode === 'input' && css`
+    border: 1px solid var(--ck-clr-ln);
+    cursor: pointer;
+    height: 30px;
+    border-radius: var(--ter-rd);
+    background-color: rgb(255, 255, 255);
+    padding: 0px 2px 0px 8px;
+    .react-daterange-picker {
+      background-color: transparent;
+      padding: 0px;
+    }
+  `}
+`;

package/src/components/date/typed.ts

@@ -0,0 +1,3 @@
+type ValuePiece = Date | null;
+
+export type TValueDateRange = ValuePiece | [ValuePiece, ValuePiece];

package/src/typeds/shares.typed.ts

@@ -1,4 +1,5 @@
-import { TMouseEvent, TObject, TState } from './base.typed';
+import { Dispatch, JSX } from 'react';
+import { TChangeEvent, TMouseEvent, TObject, TPage, TState } from './base.typed';
 import { TCloseDropdownFunction } from '../components/dropdown/typed';
 import { TCustomField, TAutoCopy } from '../components/masterTable/typed';
 import { TMessageFunction, TMessageQuestionFunction } from '../components/message/typed';
@@ -108,3 +109,163 @@ export type TMasterProps = {
   setForceUpdate?: TState<boolean>
   evPickAll?: TMouseEvent
 }
+
+export type TInData<TData = never> = {
+  loading: boolean
+  data?: TData | null
+}
+
+export type TInListProps = {
+  loadName: string
+  searchByDef: string
+  hasCheckAll?: boolean
+  hasSubscription?: boolean
+  hasTab?: boolean
+  hasSort?: boolean
+  tabStorage?: string
+  sortStorage?: string
+  pageStorage?: string
+}
+
+export type TInPart = {
+  evOpenPopup?:  TPopupOpenFunction
+  evForcePopUp?: TPopupFunction
+  evCloseDropdown?: TCloseDropdownFunction
+  evCreateMessage?: TMessageFunction
+  evCreateMessageQuestion?: TMessageQuestionFunction
+  saveSubscription?: (statuses: (string | null)[], id: number) => void
+  clearSubscription?: ()=> void 
+  data?: any
+  id?: string
+  evPrintReceipt?: (dataOrder: any) => void
+}
+
+export type TInList = TInPart & {
+  firstDispatch: Dispatch<any>  
+  resetByOption: (opt?: string | string[], callback?: () => void, noScroll?: boolean) => void
+  activeStatusTab?: string
+  evClickTab?: TMouseEvent
+  loadName?: string,
+  activePageOption: number
+  evSetPageOption: TMouseEvent
+  activePage: number
+  evSetPage: TMouseEvent
+  activeCursor: string
+  searchInput: string
+  evSearchInput: TChangeEvent
+  activeSearchBy: string
+  evClickSearchBy: TMouseEvent
+  abortRef: AbortController
+  abortSecRef: AbortController
+  isForceUpdate: boolean
+  checkboxData?: TObject[]
+  isCheckAll?: boolean
+  isForceUpdateCheckAll?: boolean
+  isResetSubscription?: boolean
+  activeSort?: string
+  evChangeSort?: TChangeEvent
+  isForceUpdateSort?: boolean
+  evClickCollapse?: TMouseEvent
+  isReadyQuery: boolean
+}
+
+export type TInlistPart = Omit<TInList, 
+  'evClickTab' | 
+  'activePageOption' |
+  'evSetPageOption' | 
+  'activePage' | 
+  'evSetPage' | 
+  'activeCursor' |
+  'searchInput' | 
+  'abortRef' |
+  'abortSecRef' |
+  'isResetSubscription' |
+  'isReadyQuery'> & {
+  pageEl: JSX.Element | null
+  readyFilter?: string[]
+  parseSetForceUpdate?: (value: boolean) => void
+  evReload?: () => void 
+}
+
+export type TPagination = {
+  data?: TPage | null
+  type: string
+  activePage: number
+  evSetPage: TMouseEvent
+  activePageOption?: number
+  evSetPageOption: TMouseEvent
+  $mode?: string
+}
+
+export type TObjPage = {
+  cursor?: string
+  page: number
+  isCurrent: boolean
+}
+
+export type TPageObj = {
+  first: TObjPage
+  last: TObjPage
+  next: TObjPage
+  prev: TObjPage
+  around: TObjPage
+  dot: {
+    start: boolean
+    end: boolean
+  }
+} | TObject | null
+
+export type TNewFilterPartial = {
+  firstDispatch?: Dispatch<any>
+  activeStatusTab?: string
+  evCloseDropdown?: TCloseDropdownFunction 
+  readyFilter?: string[] 
+  isForceUpdate: boolean
+  setForceUpdate?: TState<boolean>
+  localStorageName?: string 
+  loadName?: string
+  resetByOption?: (opt?: string | string[], callback?: () => void, noScroll?: boolean) => void
+}
+
+export type TTimeFilter = {
+  startDate: Date | null
+  endDate: Date | null
+  rangeDate : string
+}
+
+export type TNewFunction = {
+  checkboxData?: TObject[]
+  evReload?: () => void 
+  evForcePopUp?: TPopupFunction
+  evCreateMessage?: TMessageFunction
+  evCreateMessageQuestion?: TMessageQuestionFunction
+  type?: string
+  data?: TObject[]
+  evOpenPopup?: TPopupOpenFunction
+  inboundId?: number
+  outboundId?: number
+  adjustmentId?: number
+  evMarkIncomplete?: TMouseEvent
+  source?: string
+  portalKey?: number
+}
+
+export type TDetailNew<TData = never> = {
+  activeTab?: string
+  evOpenPopup?: TPopupOpenFunction
+  data: TData
+  evClickTabDetail?: TMouseEvent
+  evCreateMessage?: TMessageFunction
+  evCreateMessageQuestion?: TMessageQuestionFunction
+  evCloseDropdown?: TCloseDropdownFunction
+  evReload?: () => void 
+}
+
+type Callback<S> = (state: S) => void | (() => void | undefined);
+
+type DispatchWithCallback<A, S> = (
+  value: A,
+  callback: Callback<S>,
+) => void;
+
+export type TStateCallback<TData> = DispatchWithCallback<React.SetStateAction<TData>, TData>

package/src/assets/images/icons/filter copy.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="auto" height="auto" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-  <title>filter-horizontal-solid</title>
-  <g id="Layer_2" data-name="Layer 2">
-    <g id="invisible_box" data-name="invisible box">
-      <rect width="48" height="48" fill="none"/>
-    </g>
-    <g id="icons_Q2" data-name="icons Q2">
-      <path d="M41.8,8H21.7A6.2,6.2,0,0,0,16,4a6,6,0,0,0-5.6,4H6.2A2.1,2.1,0,0,0,4,10a2.1,2.1,0,0,0,2.2,2h4.2A6,6,0,0,0,16,16a6.2,6.2,0,0,0,5.7-4H41.8A2.1,2.1,0,0,0,44,10,2.1,2.1,0,0,0,41.8,8Z"/>
-      <path d="M41.8,22H37.7A6.2,6.2,0,0,0,32,18a6,6,0,0,0-5.6,4H6.2a2,2,0,1,0,0,4H26.4A6,6,0,0,0,32,30a6.2,6.2,0,0,0,5.7-4h4.1a2,2,0,1,0,0-4Z"/>
-      <path d="M41.8,36H24.7A6.2,6.2,0,0,0,19,32a6,6,0,0,0-5.6,4H6.2a2,2,0,1,0,0,4h7.2A6,6,0,0,0,19,44a6.2,6.2,0,0,0,5.7-4H41.8a2,2,0,1,0,0-4Z"/>
-    </g>
-  </g>
-</svg>