Restruct-Corporate-Advantage/Avatar
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Provided latest imageeditor with in-turn updated deps
Some checks failed
armco-org/Avatar/pipeline/head There was a failure building this commit
Details

Browse Source
This commit is contained in:
mohiit1502
2026-02-01 19:51:31 +05:30
parent 461aead734
commit 967ebe3731
6 changed files with 703 additions and 923 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

1490
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -14,7 +14,7 @@
},
"dependencies": {
"@armco/icon": "^0.0.13",
"@armco/imageeditor": "^0.0.8",
"@armco/imageeditor": "^0.0.9",
"@armco/shared-components": "^0.0.61",
"@armco/types": "^0.0.22",
"@armco/utils": "^0.0.31",

17
publish-local.sh
View File

@@ -6,11 +6,18 @@ set -e
npm run build
cp package.json build/
sed -i '' -E 's/"build"/"*"/' build/package.json
sed -i '' 's#"build/cjs/Avatar.js"#"cjs/Avatar.js"#' build/package.json
sed -i '' 's#"build/es/Avatar.js"#"es/Avatar.js"#' build/package.json
sed -i '' 's#"build/types/Avatar.d.ts"#"types/Avatar.d.ts"#' build/package.json
node <<'NODE'
const fs = require('fs');
const path = require('path');
const pkgPath = path.resolve(__dirname, 'build', 'package.json');
let content = fs.readFileSync(pkgPath, 'utf8');
content = content
.replace(/"build"/g, '"*"')
.replace(/"build\/cjs\/Avatar\.js"/g, '"cjs/Avatar.js"')
.replace(/"build\/es\/Avatar\.js"/g, '"es/Avatar.js"')
.replace(/"build\/types\/Avatar\.d\.ts"/g, '"types/Avatar.d.ts"');
fs.writeFileSync(pkgPath, content);
NODE
cd build
npm pack --pack-destination ~/__Projects__/Common

17
publish.sh
View File

@@ -6,11 +6,18 @@ set -e
npm --no-git-tag-version version ${semver}
npm run build
cp package.json build/
sed -i '' -E 's/"build"/"*"/' build/package.json
sed -i '' 's#"build/cjs/Avatar.js"#"cjs/Avatar.js"#' build/package.json
sed -i '' 's#"build/es/Avatar.js"#"es/Avatar.js"#' build/package.json
sed -i '' 's#"build/types/Avatar.d.ts"#"types/Avatar.d.ts"#' build/package.json
node <<'NODE'
const fs = require('fs');
const path = require('path');
const pkgPath = path.resolve(__dirname, 'build', 'package.json');
let content = fs.readFileSync(pkgPath, 'utf8');
content = content
.replace(/"build"/g, '"*"')
.replace(/"build\/cjs\/Avatar\.js"/g, '"cjs/Avatar.js"')
.replace(/"build\/es\/Avatar\.js"/g, '"es/Avatar.js"')
.replace(/"build\/types\/Avatar\.d\.ts"/g, '"types/Avatar.d.ts"');
fs.writeFileSync(pkgPath, content);
NODE
cd build
npm publish --access public --loglevel verbose

100
src/Avatar.tsx
View File

@@ -1,31 +1,48 @@
import { memo, useEffect, useState } from "react"
import {
AvatarProps,
ArProgress,
ArSizes,
ImageProps,
UploadResult,
BaseProps,
FunctionType,
} from "@armco/types"
import Icon from "@armco/icon"
import { useModalState } from "@armco/utils/hooks"
import ImageEditor from "@armco/imageeditor"
import { Image, ProgressIndicator, Text } from "@armco/shared-components"
import {
ArProgress,
ArSizes,
Image,
ProgressIndicator,
Text,
UploadResult,
} from "@armco/shared-components"
import { ImageProps } from "@armco/shared-components/types/Image"
import "./Avatar.component.scss"
const AVATAR_SIZES = {
xsmall: "1.5rem",
small: "2.5rem",
regular: "3rem",
large: "4.5rem",
xlarge: "7rem",
const AVATAR_SIZES: Record<ArSizes, string> = {
[ArSizes.XSMALL]: "1.5rem",
[ArSizes.SMALL]: "2.5rem",
[ArSizes.REGULAR]: "3rem",
[ArSizes.LARGE]: "4.5rem",
[ArSizes.XLARGE]: "7rem",
}
const ACTION_ICON_SIZES = {
xsmall: "0.75rem",
small: "1.25rem",
regular: "1.6rem",
large: "2.3rem",
xlarge: "3.2rem",
const ACTION_ICON_SIZES: Record<ArSizes, string> = {
[ArSizes.XSMALL]: "0.75rem",
[ArSizes.SMALL]: "1.25rem",
[ArSizes.REGULAR]: "1.6rem",
[ArSizes.LARGE]: "2.3rem",
[ArSizes.XLARGE]: "3.2rem",
}
export interface AvatarProps extends BaseProps {
clearImage?: FunctionType
item?: UploadResult
onChange?: FunctionType
onCommit?: FunctionType
size?: ArSizes
uploadButtonText?: string
uploadingButtonText?: string
variant?: "rect" | "circle"
viewOnly?: boolean
}
/**
@@ -73,13 +90,10 @@ const Avatar = memo(
return (
<span
className={`ar-Avatar bg cursor-pointer${size ? " " + size : ""}${
localItem ? " " + localItem.status : ""
}${variant === "circle" ? " border-radius-50" : ""} ${
isSmall ? "p-1" : "p-2"
} ${hasCompleted ? "border" : "dashed-border"} ${variant}${
classes ? " " + classes : ""
}`}
className={`ar-Avatar bg cursor-pointer${size ? " " + size : ""}${localItem ? " " + localItem.status : ""
}${variant === "circle" ? " border-radius-50" : ""} ${isSmall ? "p-1" : "p-2"
} ${hasCompleted ? "border" : "dashed-border"} ${variant}${classes ? " " + classes : ""
}`}
style={{ color }}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
@@ -100,24 +114,21 @@ const Avatar = memo(
/>
{
<span
className={`ar-Avatar__prompt flex-center flex-column w-100${
hasPassed ? " h-100 border overflow-hidden" : ""
}${
variant === "circle"
className={`ar-Avatar__prompt flex-center flex-column w-100${hasPassed ? " h-100 border overflow-hidden" : ""
}${variant === "circle"
? " border-radius-50"
: " border-radius-6px"
}`}
}`}
>
{isInProgress && (
<>
<span
className={`${
size === ArSizes.XLARGE
? "mb-2"
: size === ArSizes.LARGE
className={`${size === ArSizes.XLARGE
? "mb-2"
: size === ArSizes.LARGE
? "mb-1"
: ""
} mw-100 overflow-hidden`}
} mw-100 overflow-hidden`}
>
{uploadingButtonText}
</span>
@@ -168,9 +179,8 @@ const Avatar = memo(
}
{hovered && localItem && (
<div
className={`ar-Avatar__actions w-100 h-100 position-absolute flex-center${
displayed ? " show" : ""
}${variant === "circle" ? " border-radius-50" : ""}`}
className={`ar-Avatar__actions w-100 h-100 position-absolute flex-center${displayed ? " show" : ""
}${variant === "circle" ? " border-radius-50" : ""}`}
>
{hasPassed && (
<Icon
@@ -218,14 +228,14 @@ const Avatar = memo(
{!viewOnly && (
<Icon
attributes={{
colors: {fillColor: "white"},
colors: { fillColor: "white" },
classes: hasPassed
? isSmall
? size === ArSizes.XSMALL
? ""
: "ms-1"
: "ms-2"
: "",
? isSmall
? size === ArSizes.XSMALL
? ""
: "ms-1"
: "ms-2"
: "",
size: ACTION_ICON_SIZES[size],
}}
events={{