From fb6f817369dde4f76de63c65b0a87ab01605f11a Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Mon, 3 Oct 2022 11:08:22 +0500 Subject: [PATCH] added invalid flag --- packages/components/input-phone/index.js | 3 ++- .../components/input-phone/styled-input-phone.js | 6 ++++++ packages/components/input-phone/svg/index.js | 3 ++- packages/components/input-phone/svg/invalid.svg | 12 ++++++++++++ 4 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 packages/components/input-phone/svg/invalid.svg diff --git a/packages/components/input-phone/index.js b/packages/components/input-phone/index.js index 2d02098aaf..ecbc9d70a0 100644 --- a/packages/components/input-phone/index.js +++ b/packages/components/input-phone/index.js @@ -5,6 +5,7 @@ import PropTypes from "prop-types"; import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; import Box from "@docspace/components/box"; import InputBlock from "@docspace/components/input-block"; +import { InvalidFlag } from "./svg"; import { StyledBox, @@ -29,7 +30,7 @@ export const InputPhone = memo((props) => { const el = options.find((option) => option.dialCode === str); if (e.target.value === "") { - setCountry((prev) => ({ ...prev, dialCode: "+" })); + setCountry((prev) => ({ ...prev, dialCode: "+", icon: InvalidFlag })); setIsValid(false); } diff --git a/packages/components/input-phone/styled-input-phone.js b/packages/components/input-phone/styled-input-phone.js index 22b87e33e0..5a8c07d813 100644 --- a/packages/components/input-phone/styled-input-phone.js +++ b/packages/components/input-phone/styled-input-phone.js @@ -29,6 +29,12 @@ export const StyledComboBox = styled(ComboBox)` border-bottom-right-radius: 0; cursor: pointer; padding-left: 0; + .invalid-flag { + width: 24px; + height: 18px; + margin-left: 6px; + margin-top: 9px; + } .forceColor { width: 36px; height: 36px; diff --git a/packages/components/input-phone/svg/index.js b/packages/components/input-phone/svg/index.js index 4adfbdfaee..aa432aad9f 100644 --- a/packages/components/input-phone/svg/index.js +++ b/packages/components/input-phone/svg/index.js @@ -244,4 +244,5 @@ export { default as Vunuatu } from "./vunuatu.svg"; export { default as WallisAndFutuna } from "./wallis-and-futuna.svg"; export { default as Yemen } from "./yemen.svg"; export { default as Zambia } from "./zambia.svg"; -export { default as Zimbabwe } from "./zimbabwe.svg"; \ No newline at end of file +export { default as Zimbabwe } from "./zimbabwe.svg"; +export { default as InvalidFlag } from "./invalid.svg"; diff --git a/packages/components/input-phone/svg/invalid.svg b/packages/components/input-phone/svg/invalid.svg new file mode 100644 index 0000000000..a215409b1b --- /dev/null +++ b/packages/components/input-phone/svg/invalid.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + +