Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into refactor/1327-admin-dev-management
Browse files Browse the repository at this point in the history
Trường An authored May 29, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents f238fa7 + 20a3017 commit 81ec4ee
Showing 49 changed files with 392 additions and 596 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -68,7 +68,6 @@
"error-polyfill": "^0.1.2",
"graphql": "^14.5.8",
"hardtack": "^4.1.2",
"offline-plugin": "^5.0.7",
"pell": "^1.0.6",
"react": "^16.12.0",
"react-datepicker": "^2.9.6",
Original file line number Diff line number Diff line change
@@ -15,11 +15,5 @@ exports[`App should match a snapshot 1`] = `
<Component>
<Component />
</Component>
<Component
message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
preventClose={true}
variant="primary"
visible={false}
/>
</Provider>
`;
12 changes: 0 additions & 12 deletions packages/aml-checklist/src/core/app.tsx
Original file line number Diff line number Diff line change
@@ -3,25 +3,13 @@ import Router from './router'
import { Provider } from 'react-redux'
import store from './store'
import * as React from 'react'
import { ToastMessage, useOfflinePLugin } from '@reapit/elements'

const App = () => {
const { isNewVersionAvailable } = useOfflinePLugin()
const bindedWindowLocation = React.useMemo(() => window.location.reload.bind(window.location), [])

return (
<Provider store={store.reduxStore}>
<PortalProvider>
<Router />
</PortalProvider>
<ToastMessage
preventClose={true}
visible={isNewVersionAvailable}
variant="primary"
onCloseToast={bindedWindowLocation}
/* eslint-disable-next-line max-len */
message="A new version is available. Please refresh your browser or click on this notification to receive the latest update."
/>
</Provider>
)
}
2 changes: 1 addition & 1 deletion packages/cognito-auth/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@reapit/cognito-auth",
"version": "2.1.5",
"version": "2.1.6",
"description": "Simple wrapper around AWS Cognito for basic authentication flow",
"keywords": [],
"homepage": "https://github.com/reapit/foundations#readme",
2 changes: 1 addition & 1 deletion packages/cognito-auth/src/tests/badges/badge-lines.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions packages/elements/.storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://reapit-demo-site.s3.eu-west-2.amazonaws.com/scripts/search-widget.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
209 changes: 104 additions & 105 deletions packages/elements/src/components/DatePicker/index.tsx
Original file line number Diff line number Diff line change
@@ -9,15 +9,7 @@ import { fieldValidateRequire } from '../../utils/validators'

const { useState, useEffect } = React

export const CustomInput = ({
onChange,
onBlur,
value,
id,
onClick,
className,
...rest
}: {
export type CustomInputType = {
onChange?: any
onBlur?: any
onFocus?: any
@@ -26,125 +18,132 @@ export const CustomInput = ({
id?: string
onClick?: any
className: string
}) => {
const [inputValue, setInputValue] = useState(value)
}

// sync with the real value
useEffect(() => {
setInputValue(value)
}, [value])
export const CustomInput = React.forwardRef<HTMLInputElement, CustomInputType>(
({ onChange, onBlur, value, id, onClick, className, ...rest }: CustomInputType, ref) => {
const [inputValue, setInputValue] = useState(value)

const [isBackspaceKeyPressed, setIsBackspaceKeyPressed] = useState(false)
// sync with the real value
useEffect(() => {
setInputValue(value)
}, [value])

// COOKED https://stackoverflow.com/questions/12578507/implement-an-input-with-a-mask
const _onChange = e => {
const inputElement = e.target
const mask = '__/__/____'
const [isBackspaceKeyPressed, setIsBackspaceKeyPressed] = useState(false)

if (!inputElement) {
return
}
// COOKED https://stackoverflow.com/questions/12578507/implement-an-input-with-a-mask
const _onChange = e => {
const inputElement = e.target
const mask = '__/__/____'

const castedInputElement = inputElement as HTMLInputElement
if (!inputElement) {
return
}

let oldStart = castedInputElement.selectionStart
const textFieldValue = e.target.value
const castedInputElement = inputElement as HTMLInputElement

const splitTextFieldValue = textFieldValue.split('').filter(char => char !== '/')
let oldStart = castedInputElement.selectionStart
const textFieldValue = e.target.value

const transformedTextFieldValue = mask
.split('')
.map(maskChar => {
if (maskChar !== '_') {
return maskChar
}
if (textFieldValue.length === 0) return maskChar
const splitTextFieldValue = textFieldValue.split('').filter(char => char !== '/')

const extractedSplitTextFieldValue = splitTextFieldValue.shift()
if (!extractedSplitTextFieldValue) {
return maskChar
}
return extractedSplitTextFieldValue
})
.join('')
const transformedTextFieldValue = mask
.split('')
.map(maskChar => {
if (maskChar !== '_') {
return maskChar
}
if (textFieldValue.length === 0) return maskChar

setInputValue(transformedTextFieldValue)
const extractedSplitTextFieldValue = splitTextFieldValue.shift()
if (!extractedSplitTextFieldValue) {
return maskChar
}
return extractedSplitTextFieldValue
})
.join('')

const parsedTransformedTextFieldValue = dayjs(transformedTextFieldValue, 'DD/MM/YYYY')
setInputValue(transformedTextFieldValue)

if (parsedTransformedTextFieldValue.isValid()) {
onChange({
target: {
value: parsedTransformedTextFieldValue,
},
})
}
const parsedTransformedTextFieldValue = dayjs(transformedTextFieldValue, 'DD/MM/YYYY')

// set state ^ affect asynchronous. event loop thing...
setTimeout(() => {
if (oldStart) {
/**
* handle
* "11<cusor>/" -> press 1 -> "11/<cursor>1"
*/
if (!isBackspaceKeyPressed && transformedTextFieldValue[oldStart - 1] === '/') {
castedInputElement.selectionStart = oldStart + 1
castedInputElement.selectionEnd = oldStart + 1
return
}
if (parsedTransformedTextFieldValue.isValid()) {
onChange({
target: {
value: parsedTransformedTextFieldValue,
},
})
}

/**
* Reset the flag if it happened
*/
if (isBackspaceKeyPressed) {
setIsBackspaceKeyPressed(false)
// set state ^ affect asynchronous. event loop thing...
setTimeout(() => {
if (oldStart) {
/**
* handle
* "11<cusor>/" -> press 1 -> "11/<cursor>1"
*/
if (!isBackspaceKeyPressed && transformedTextFieldValue[oldStart - 1] === '/') {
castedInputElement.selectionStart = oldStart + 1
castedInputElement.selectionEnd = oldStart + 1
return
}

/**
* Reset the flag if it happened
*/
if (isBackspaceKeyPressed) {
setIsBackspaceKeyPressed(false)
}
}
}

castedInputElement.selectionStart = oldStart
castedInputElement.selectionEnd = oldStart
}, 1)
}
castedInputElement.selectionStart = oldStart
castedInputElement.selectionEnd = oldStart
}, 1)
}

const onKeyUp = e => {
const inputChar = String.fromCharCode(e.keyCode)
const onKeyUp = e => {
const inputChar = String.fromCharCode(e.keyCode)

// Allow: cmd + anything, ctrl + anything (copy, paste, select all... etc)
if (e.metaKey || e.ctrlKey) {
return
}
// Allow: cmd + anything, ctrl + anything (copy, paste, select all... etc)
if (e.metaKey || e.ctrlKey) {
return
}

// prevent user from input number
if (![8, 37, 38, 39, 40].includes(e.keyCode) && !inputChar.match(/[0-9]/)) {
e.preventDefault()
}
// prevent user from input number
if (![8, 37, 38, 39, 40].includes(e.keyCode) && !inputChar.match(/[0-9]/)) {
e.preventDefault()
}

// flag to checked if backspace key was pressed
if (e.keyCode === 8) {
setIsBackspaceKeyPressed(true)
// flag to checked if backspace key was pressed
if (e.keyCode === 8) {
setIsBackspaceKeyPressed(true)
}
}
}

const _onBlur = e => {
setInputValue(value)
onBlur(e)
}
const _onBlur = e => {
setInputValue(value)
onBlur(e)
}

return (
<input
type="input"
className={className}
placeholder="DD/MM/YYYY"
value={inputValue}
id={id}
onChange={_onChange}
onKeyDown={onKeyUp}
onBlur={_onBlur}
onClick={onClick}
{...rest}
/>
)
}
return (
<input
ref={ref}
type="input"
className={className}
placeholder="DD/MM/YYYY"
value={inputValue}
id={id}
onChange={_onChange}
onKeyDown={onKeyUp}
onBlur={_onBlur}
onClick={onClick}
{...rest}
/>
)
},
)

CustomInput.displayName = 'CustomInput'

export interface DatePickerProps {
name: string

This file was deleted.

This file was deleted.

37 changes: 0 additions & 37 deletions packages/elements/src/components/SearchComponent/index.stories.tsx

This file was deleted.

17 changes: 0 additions & 17 deletions packages/elements/src/components/SearchComponent/index.tsx

This file was deleted.

Loading

0 comments on commit 81ec4ee

Please sign in to comment.